Aula Virtual: Nombre del Curso Muy Interesante

Subtema 1.2: Conceptos Clave

Esta es la descripción principal del subtema, donde se explican los objetivos y el contenido general que se abordará. Puede incluir texto formateado, imágenes y otros elementos multimedia.

Video de la Clase

ÁREA DEL REPRODUCTOR DE VIDEO
Tu Progreso en este Subtema:
50%
Califica este Subtema:
Tu calificación: (Aún no has calificado) / Promedio: 4.5 de 7 (15 votos)

Materiales de Apoyo

Consultas al Profesor sobre "Conceptos Clave"

Alumno X: ¿Podría explicar mejor el concepto Y?

Profesor Z: Claro, el concepto Y se refiere a... (hace 1 día)

Especificaciones Técnicas: Módulo Aula Virtual

Especificaciones Técnicas: Módulo Aula Virtual

Fecha de Elaboración: 24 de mayo de 2025

Versión del Documento: 1.0

Introducción

El presente documento detalla las especificaciones técnicas para el desarrollo e implementación del módulo "Aula Virtual" dentro del sistema de gestión OTEC. Este módulo tiene como objetivo proporcionar un entorno de aprendizaje en línea interactivo y estructurado para los alumnos inscritos en los diversos cursos ofrecidos.

El desarrollo se guiará por los principios de simplicidad, claridad y la metodología iterativa acordada, asegurando la adherencia a las directrices de codificación establecidas, incluyendo el uso de MySQL tradicional con escapado manual de datos y la restricción en el uso de AJAX/JSON a menos que sea explícitamente autorizado para funcionalidades específicas donde aporte un valor significativo y bajo un esquema de desarrollo incremental.

Directrices Generales de Desarrollo Aplicables:

I. Arquitectura General y Acceso

A. Punto de Entrada Principal

Se propone un archivo PHP principal para el aula de cada curso, por ejemplo, aula_virtual_curso.php.

B. Autenticación y Autorización

C. Diseño General de la Interfaz (Layout)

La página aula_virtual_curso.php tendrá un diseño consistente:

II. Estructura y Presentación de Contenidos del Curso

A. Temas y Subtemas

La estructura de contenido se basará en la jerarquía de Temas que agrupan Subtemas (clases o actividades).

B. Contenido Detallado por Subtema

Cada subtema cargado en el área principal mostrará la siguiente información:

  1. Título y Descripción del Subtema:
    • Campos: subtemas_curso.titulo, subtemas_curso.descripcion, subtemas_curso.contenido[cite: 101].
  2. Documentación Asociada:
    • Tabla: documentos_subtema[cite: 95].
      • Se mostrará una lista de documentos vinculados al subtemas_curso.id.
      • Para cada documento: nombre_archivo (como enlace de descarga) y descripcion[cite: 95]. La descarga apuntará a ruta_archivo[cite: 95].
      • Nota para el programador: La interfaz para que el profesor/admin suba y gestione estos documentos se considera parte del panel de administración del curso y no del aula virtual del alumno directamente, aunque está relacionada.
  3. Clases en Vivo (Zoom):
    • Campos: subtemas_curso.link_zoom, subtemas_curso.fecha_programada, subtemas_curso.duracion_minutos[cite: 101].
    • Visualización: Se mostrará la fecha y hora programada de la clase. Un botón o enlace prominente con el texto "Unirse a Clase en Vivo" que dirija a link_zoom.
  4. Clases Grabadas (Vimeo u otros):
    • Campos: subtemas_curso.url_video, subtemas_curso.tipo_video[cite: 101].
    • Visualización: Si tipo_video es 'vimeo' o 'youtube', se intentará embeber el reproductor de video. Si es 'otro' o el embebido falla, se mostrará un enlace directo a url_video.

III. Funcionalidades de Comunicación e Interacción

A. Mensajería por Subtema (Consultas al Profesor)

B. Pizarra del Curso (Anuncios)

C. Listado de Alumnos Conectados

D. Chat de Comunicación entre Alumnos Online (Básico)

IV. Seguimiento del Progreso del Alumno

A. Progreso de Visualización de Videos (con AJAX/JSON autorizado bajo condiciones)

  1. Objetivo: Rastrear cuánto tiempo de un video ha visualizado un alumno, mostrar este progreso porcentualmente y marcar el subtema como 'completado' al llegar al 100%.
  2. Base de Datos:
    • Tabla subtemas_alumno[cite: 100]:
      • Usar campo tiempo_visualizacion (INT) para almacenar segundos vistos.
      • Usar campo modo (ENUM: 'no_iniciado', 'en_progreso', 'completado', 'revisado') [cite: 100] para el estado del subtema para el alumno. Se actualizará a 'completado' cuando tiempo_visualizacion alcance la duración total.
    • Tabla subtemas_curso[cite: 101]:
      • Usar campo duracion_minutos (INT) como duración total del video (convertir a segundos para cálculos).
  3. Mecanismo de Actualización (AJAX):
    • Lado del Cliente (JavaScript):
      • Requiere conocer el tipo de reproductor de video (HTML5 <video>, Vimeo, YouTube) para usar su API específica.
      • Escuchar eventos de progreso del video (ej. timeupdate).
      • Enviar el tiempo actual (currentTime) al servidor vía AJAX (POST) en intervalos regulares (ej. cada 30-60 segundos) y/o en eventos clave (pausa, fin, abandono de página con navigator.sendBeacon si es posible).
      • Datos a enviar: alumno_id (de sesión), curso_id, tema_id, subtema_id, tiempo_actual_segundos.
    • Lado del Servidor (Nuevo archivo PHP: actualizar_progreso_video.php):
      • Recibe los datos por POST.
      • Valida la autenticación del alumno, su inscripción al curso y la validez de los IDs.
      • Busca o crea el registro en subtemas_alumno.
      • Actualiza tiempo_visualizacion (se recomienda guardar el máximo tiempo visto para ese alumno/subtema).
      • Recalcula el `modo` del subtema ('en_progreso' o 'completado') basado en el nuevo `tiempo_visualizacion` y la duración total del video.
      • Devuelve una respuesta JSON (ej., {"status": "success", "nuevo_modo": "en_progreso", "tiempo_guardado": X}).
  4. Visualización del Progreso:
    • En el panel de navegación del aula y en la página del subtema:
      • Mostrar un indicador porcentual: "Progreso: X%".
      • Porcentaje = (tiempo_visualizacion / (duracion_minutos * 60)) * 100.
      • Indicador visual para el modo (ej. ícono de no iniciado, en progreso, completado).
      • La barra de progreso podría actualizarse dinámicamente con JavaScript si la respuesta AJAX es exitosa (opcional, pero mejora UX).
  5. Implementación Incremental Acordada: 1. Backend script, 2. Client-side JS (requiere info del player).

V. Sistema de Calificación de Subtemas

A. Calificación por Estrellas (7 estrellas, con AJAX/JSON autorizado bajo condiciones)

  1. Objetivo: Permitir a los alumnos calificar cada subtema con una escala de 1 a 7 estrellas.
  2. Base de Datos:
    • Tabla subtemas_alumno[cite: 100]: Usar campo calificacion (INT) para almacenar la calificación (1-7).
  3. Interfaz de Usuario (en la página del subtema):
    • Mostrar 7 iconos de estrella interactivos.
    • Al hacer clic, se selecciona una calificación. El estado visual de las estrellas se actualiza vía JS.
    • La calificación se envía al servidor vía AJAX (POST).
  4. Lógica del Servidor (Nuevo archivo PHP: actualizar_calificacion_subtema.php):
    • Recibe alumno_id (de sesión), subtema_id, valor_calificacion.
    • Valida los datos (calificación entre 1-7, alumno inscrito, subtema válido).
    • Inserta/Actualiza el campo calificacion en subtemas_alumno.
    • Devuelve respuesta JSON (ej. {"status": "success", "message": "Calificación guardada"}).
  5. Visualización de Calificación Promedio (Recomendado):
    • Calcular y mostrar el promedio de calificacion para el subtema actual desde todos los alumnos que lo han calificado.
    • SQL: SELECT AVG(calificacion) as promedio, COUNT(calificacion) as total_votos FROM subtemas_alumno WHERE subtema_id = ? AND calificacion IS NOT NULL AND estado = 'activo'.
    • Mostrar como "Promedio: X.X de 7 estrellas (Y votos)".
  6. Implementación Incremental Acordada: 1. Backend script, 2. Frontend (estrellas y JS básico), 3. Frontend (AJAX y UI dinámica).

VI. Resumen de Nuevas Tablas de Base de Datos

Además de las tablas existentes que se utilizarán extensivamente, se propone la creación de la siguiente nueva tabla:

Tabla Propósito Campos Clave Sugeridos
chat_aula_mensajes Almacenar mensajes del chat entre alumnos para un curso específico. id (PK), curso_id (FK), alumno_id (FK), nombre_alumno_emisor, mensaje_chat, timestamp_mensaje, estado ('activo'/'inactivo')

Definición SQL para chat_aula_mensajes:

CREATE TABLE IF NOT EXISTS `chat_aula_mensajes` (
    `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `curso_id` INT NOT NULL,
    `alumno_id` INT NOT NULL,
    `nombre_alumno_emisor` VARCHAR(200) NOT NULL,
    `mensaje_chat` TEXT NOT NULL,
    `timestamp_mensaje` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    `estado` ENUM('activo', 'inactivo') DEFAULT 'activo',
    FOREIGN KEY (`curso_id`) REFERENCES `cursos_sence`(`id`) ON DELETE CASCADE ON UPDATE CASCADE,
    FOREIGN KEY (`alumno_id`) REFERENCES `alumnos`(`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Nota: Las tablas contactos_web y contacto_conversaciones fueron creadas para el módulo de Contacto y Gestión de Contactos, no directamente para el Aula Virtual, pero se mencionan aquí por ser recientes.

VII. Nuevos Archivos PHP (Lado Servidor) a Crear

Adicionalmente, se podrían requerir o modificar archivos en el panel de administración para gestionar contenidos específicos del aula (ej. Pizarra, moderación de chat si es necesario, gestión de documentos de subtemas si no está ya cubierto).

VIII. Consideraciones Adicionales y para el Futuro

IX. Conclusión y Próximos Pasos Sugeridos

Este documento presenta una base técnica detallada para el desarrollo del módulo Aula Virtual. Cubre las funcionalidades principales discutidas, las estructuras de datos y las consideraciones técnicas, adhiriéndose a las directrices de desarrollo establecidas.

Se sugiere un enfoque de desarrollo iterativo, comenzando por un conjunto de funcionalidades centrales y expandiendo desde allí. Los próximos pasos recomendados son:

  1. Revisión y Aprobación: Que revises este documento y apruebes las especificaciones generales.
  2. Priorización: Seleccionar la primera funcionalidad o conjunto de funcionalidades del Aula Virtual a desarrollar (ej. visualización de Temas/Subtemas y su contenido básico: descripción, documentos, videos).
  3. Desarrollo Iterativo: Para la funcionalidad seleccionada, proceder con:
    • (Si aplica) Propuesta detallada de cualquier sub-componente.
    • Autorización para codificar.
    • Entrega del código por etapas (ej. backend primero, luego frontend/JS para AJAX).
    • Pruebas y retroalimentación.

Estoy a tu disposición para cualquier aclaración, modificación o para definir la primera etapa de codificación.

Informe Técnico Detallado: Módulo Aula Virtual

Informe Técnico Detallado: Módulo Aula Virtual

Fecha de Elaboración: 24 de mayo de 2025

Versión del Documento: 2.0 (Basado en Bosquejo Visual)

Tabla de Contenidos

Introducción

El presente documento detalla las especificaciones técnicas exhaustivas para el desarrollo del módulo "Aula Virtual". Este informe se basa en discusiones previas y en el bosquejo visual HTML acordado, sirviendo como guía fundamental para el programador. Su objetivo es asegurar una implementación clara, funcional y alineada con los requisitos establecidos.

Directrices Fundamentales de Desarrollo Aplicables:

I. Arquitectura Visual y de Navegación del Aula (aula_virtual_curso.php)

Esta sección describe la interfaz principal del aula virtual, basándose en el bosquejo HTML previamente aprobado.

A. Encabezado General del Sitio

B. Área de Título del Curso y Breadcrumbs

C. Layout Principal (Dos Columnas)

Se utilizará el sistema de grid de Bootstrap para una disposición adaptable.

D. Panel de Navegación Lateral del Aula (Sidebar)

E. Área de Contenido Principal (Dinámica)

Esta área cambiará su contenido según la selección en el sidebar. Tendrá un fondo blanco.

F. Pie de Página General del Sitio

II. Especificaciones de Contenidos del Curso (Lógica Backend)

Esta sección detalla cómo se obtendrán y manejarán los datos para poblar la interfaz.

A. Carga de Temas, Subtemas y sus Detalles

III. Funcionalidades de Comunicación e Interacción (Lógica Backend)

A. Mensajería por Subtema con Profesor

B. Pizarra de Anuncios

C. Listado de Alumnos Conectados

D. Chat Básico entre Alumnos

IV. Seguimiento del Progreso del Alumno (Videos)

Esta funcionalidad ha sido autorizada para usar AJAX y JSON bajo condiciones de desarrollo incremental.

A. Backend (actualizar_progreso_video.php)

B. Frontend (JavaScript en aula_virtual_curso.php - Vista de Subtema)

V. Sistema de Calificación de Subtemas

Esta funcionalidad ha sido autorizada para usar AJAX y JSON bajo condiciones de desarrollo incremental.

A. Backend (actualizar_calificacion_subtema.php)

B. Frontend (JavaScript en aula_virtual_curso.php - Vista de Subtema)

C. Visualización de Calificación Promedio

VI. Nuevas Tablas de Base de Datos (Resumen)

Se requerirá la siguiente nueva tabla para el módulo Aula Virtual (además de las existentes que se utilizarán):

A. Tabla: chat_aula_mensajes

ColumnaTipoNotas Adicionales
idINTNOT NULL, AUTO_INCREMENT, PRIMARY KEY
curso_idINTNOT NULL, FK a cursos_sence.id
alumno_idINTNOT NULL, FK a alumnos.id
nombre_alumno_emisorVARCHAR(200)NOT NULL (Nombre completo para mostrar, podría obtenerse con JOIN pero se denormaliza por simplicidad del chat)
mensaje_chatTEXTNOT NULL
timestamp_mensajeTIMESTAMPDEFAULT CURRENT_TIMESTAMP
estadoENUM('activo', 'inactivo')DEFAULT 'activo'

Sentencia SQL para creación:

CREATE TABLE IF NOT EXISTS `chat_aula_mensajes` (
    `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `curso_id` INT NOT NULL,
    `alumno_id` INT NOT NULL,
    `nombre_alumno_emisor` VARCHAR(200) NOT NULL,
    `mensaje_chat` TEXT NOT NULL,
    `timestamp_mensaje` TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    `estado` ENUM('activo', 'inactivo') DEFAULT 'activo',
    FOREIGN KEY (`curso_id`) REFERENCES `cursos_sence`(`id`) ON DELETE CASCADE ON UPDATE CASCADE,
    FOREIGN KEY (`alumno_id`) REFERENCES `alumnos`(`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Tablas Existentes Relevantes: cursos_sence, temas_curso, subtemas_curso, documentos_subtema, mensajes_alumno_profesor, pizarra_curso, alumnos, inscripciones_curso, accesos_aula_virtual, subtemas_alumno.

VII. Nuevos Archivos PHP (Lado Servidor) a Crear

Consideración: Se necesitarán también interfaces en el panel de administración (o en las ya existentes como editar_curso_ppp.php) para que los administradores/profesores gestionen los contenidos del aula (documentos, enlaces Zoom/Vimeo, pizarra, responder consultas). Esas interfaces no se detallan aquí pero son un prerrequisito o desarrollo paralelo.

VIII. Consideraciones Adicionales y para el Futuro

IX. Conclusión y Próximos Pasos

Este informe técnico detalla las especificaciones para el desarrollo del módulo Aula Virtual, integrando las funcionalidades discutidas y el diseño visual propuesto en el bosquejo HTML. El objetivo es proporcionar una guía clara para su implementación.

Se recomienda un **enfoque de desarrollo iterativo y por etapas**:

  1. Revisión y Aprobación Final de este Informe: Asegurar que todas las especificaciones están claras y son correctas.
  2. Priorización de la Primera Funcionalidad: Seleccionar un conjunto manejable de funcionalidades para la primera fase de codificación (ej., la estructura base de aula_virtual_curso.php con la navegación de temas/subtemas y la visualización de su contenido estático).
  3. Ciclo de Desarrollo (Análisis detallado si es necesario Autorización Codificación Pruebas Retroalimentación Corrección): Aplicar este ciclo a cada funcionalidad o grupo de funcionalidades.

Estoy listo para tus comentarios sobre este informe y para que definamos el primer conjunto de funcionalidades a codificar.